@use "../mixins/namespace" as *;

// 自定义 ElementPlus 暗黑主题
@forward "element-plus/theme-chalk/src/dark/var.scss" with (
  $colors: (
    "white": #ffffff,
    "black": #000000,
    "primary": (
      "base": #6d94e6,
    ),
    "success": (
      "base": #4cd890,
    ),
    "warning": (
      "base": #ffe066,
    ),
    "danger": (
      "base": #e85454,
    ),
    "error": (
      "base": #ff7e5f,
    ),
    "info": (
      "base": #a3adbb,
    ),
  )
);

@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

:root.dark {
  --#{$el-namespace}-text-color-primary: var(--#{$teek-namespace}-text-gray-900) !important;
  --#{$el-namespace}-text-color-regular: var(--#{$teek-namespace}-text-gray-800) !important;
  --#{$el-namespace}-text-color-secondary: var(--#{$teek-namespace}-text-gray-700) !important;
  --#{$el-namespace}-text-color-placeholder: var(--#{$teek-namespace}-text-gray-600) !important;
  --#{$el-namespace}-text-color-disabled: var(--#{$teek-namespace}-text-gray-400) !important;
  --#{$el-namespace}-bg-color: var(--#{$teek-namespace}-bg-color) !important;
  --#{$el-namespace}-bg-color-overlay: var(--#{$teek-namespace}-bg-color) !important;
  --#{$el-namespace}-bg-color-page: var(--#{$teek-namespace}-bg-color-page) !important;

  // --#{$el-namespace}-fill-color: rgb(var(--#{$teek-namespace}-gray-300-rgb), 0.6) !important;
  // --#{$el-namespace}-fill-color-light: rgb(var(--#{$teek-namespace}-gray-200-rgb), 0.6) !important;

  // 功能色覆盖
  --#{$el-namespace}-color-primary: var(--#{$teek-namespace}-color-primary) !important;
  --#{$el-namespace}-color-success: var(--#{$teek-namespace}-color-success) !important;
  --#{$el-namespace}-color-warning: var(--#{$teek-namespace}-color-warning) !important;
  --#{$el-namespace}-color-danger: var(--#{$teek-namespace}-color-danger) !important;
  --#{$el-namespace}-color-error: var(--#{$teek-namespace}-color-error) !important;
}
